<!DOCTYPE html>
<html lang="en">
  <head>
    <title><%= title %></title>

    <%-include("css.ejs")%>
    <link rel='stylesheet' href='stylesheets/contentBar.css' />
    <link rel='stylesheet' href='stylesheets/LoginRegister.css' />

    <%-include("js.ejs")%>

  </head>
  <body>
    <%-include("nav.ejs")%>

    <div class="totalBox container-fluid row">
      <form action="/users" autocomplete="off" method="post" enctype="multipart/form-data"  class="moduleBox">
        <div class="LoginBox">
          <%-include("contentBar.ejs", {contentTitle:"Login"})%>
        </div>

        <div class="RegisterBox">
          <%-include("contentBar.ejs", {contentTitle:"Register"})%>
        </div>
      </form>
    </div>
    <script>
      /* Gradient switching */
       $($("#toRegister").click(
          () => {
              $(".LoginBox").css('z-index', '0');
              $(".LoginBox").css('opacity', '0');
              $(".RegisterBox").css('z-index', '1');
              $(".RegisterBox").css('opacity', '1');
          }
       ));

       $($("#toLogin").click(
          () => {
              $(".RegisterBox").css('z-index', '0');
              $(".RegisterBox").css('opacity', '0');
              $(".LoginBox").css('z-index', '1');
              $(".LoginBox").css('opacity', '1');
          }
       ));
    </script>
  </body>
</html>